<template>
  <PageWrapper>
    <div class="page-box">
      <div class="__left">
        <div class="__header">区域列表</div>
        <div class="__box">
          <div class="box-left">
            <div class="box-header">楼栋</div>
            <div v-for="item in scene" :key="item.id" :title="item.name"
              :class="`data-item ${item.id === current.b ? 'is-select' : ''} ${item.alarmStatus ? 'is-error' : ''}`"
              @click="selectBuild(item)">{{ item.name }}</div>
          </div>
          <div class="box-right">
            <div class="box-header">楼层</div>
            <div v-for="item in floor" :key="item.id" :title="item.name"
              :class="`data-item ${item.id === current.f ? 'is-select' : ''} ${item.alarmStatus ? 'is-error' : ''}`"
              @click="selectFloor(item)">{{ item.name }}</div>
          </div>
        </div>
      </div>
      <div class="__content">
        <div class="__header">平面图</div>
        <div class="__content-img">
          <div v-for="(item, index) in points" :style="{
            left: getPosition(item.x),
            top: getPosition(item.y)
          }" :key="index" :class="`img-point ${item.alarmStatus == '1' ? 'is-alarm' : ''}`">
            <a-popover v-if="item.alarmStatus == '1'" placement="topRight">
              <template #content>
                <div class="alarm-content">
                  <div class="alarm-row">
                    设备名称：{{ item.name }}
                  </div>
                  <div class="alarm-row">
                    告警名称：{{ item.alarmRecordDeviceVOList?.[0]?.alarmPropertyName }}
                  </div>
                  <div class="alarm-row">
                    告警描述：{{ item.alarmRecordDeviceVOList?.[0]?.alarmContent }}
                  </div>
                  <div class="alarm-row">
                    告警类型：{{ item.alarmRecordDeviceVOList?.[0]?.alarmType }}
                  </div>
                  <div class="alarm-row">
                    告警等级：{{ item.alarmRecordDeviceVOList?.[0]?.alarmValue }}
                  </div>
                  <div class="alarm-row">
                    告警时间：{{ item.alarmRecordDeviceVOList?.[0]?.alarmTime }}
                  </div>
                </div>
              </template>
              <div class="point-mask"></div>
            </a-popover>
          </div>
          <img :src="currentImg" :style="{
            width: currentSize.width + 'px',
            height: currentSize.height + 'px'
          }" />
        </div>
      </div>
    </div>
  </PageWrapper>
</template>
<script lang="ts" setup>
import { ref, onMounted, reactive, watch, onBeforeUnmount } from 'vue';
import { PageWrapper } from '@/components/Page';
import defaultScence from '@/assets/images/defaultSence.svg';
import * as Api from '@/api/securityManagement';
import { getScenceDetail } from '@/api/scene';
import * as FileApi from '@/api/download';
import { useAlarmInfo } from '@/hooks/web/useAlarmInfo'

useAlarmInfo({ deviceTypes: ['GasDetector', 'FireDetector', 'Fire'] });

const currentImg = ref(defaultScence);

const getPosition = (val) => {
  return parseFloat(val * 100) + '%';
}
async function reloadIMG(senceId) {
  const ret = await FileApi.fileDownload({ id: senceId, isOnline: true })
  const blob = new Blob([ret])
  const reader = new window.FileReader();
  reader.readAsDataURL(blob)
  reader.onloadend = function () {
    currentImg.value = reader.result
  }
}
let points = ref([]);
const current = reactive({
  b: '',
  f: ''
});
const currentSize = reactive({
  width: 0,
  height: 0
});
const scene = ref([]);
const floor = ref([]);
let sceneTimmer: any = null;
let timmer: any = null;
const getDeviceAlarm = async (sceneId) => {
  const res = await Api.getDeviceAlarm({
    sentId: sceneId,
    typeCode: 'GasDetector',
  });
  if (res) {
    points.value = res;
  }
}
const getSceneTree = async () => {
  const res = await Api.getSceneTree({});
  if (res) {
    scene.value = res;
    if (!current.b) {
      current.b = res[0].id;
      floor.value = res[0].children;
      current.f = res[0].children[0]?.id;
      currentSize.width = res[0].children[0]?.frame.width;
      currentSize.height = res[0].children[0]?.frame.height;
      const fileId = res[0].children[0]?.file?.id;
      fileId && reloadIMG(fileId);
    } else {
      const floors = res.find((item: any) => {
        return item.id === current.b;
      });
      floor.value = floors.children;
    }
  }
}
const selectBuild = (build) => {
  current.b = build.id;
  current.f = '';
  // currentSize.width = 500;
  // currentSize.height = 500;
  floor.value = build.children;
  if (build.children.length) {
    selectFloor(build.children[0]);
  }
}
const selectFloor = (_floor) => {
  if (current.f !== _floor.id) {
    current.f = _floor.id;
    currentSize.width = _floor?.frame.width;
    currentSize.height = _floor?.frame.height;
    // todo 切换为当前楼层场景
    const fileId = _floor.file?.id;
    points.value = []
    fileId && reloadIMG(fileId);
  }

}
watch(() => current.f, () => {
  currentImg.value = '';
  clearInterval(timmer);
  if (current.f) {
    getDeviceAlarm(current.f);
    // timmer = setInterval(() => {
    //   getDeviceAlarm(current.f);
    // }, 10000);
  }
})
onMounted(() => {
  getSceneTree();
  // sceneTimmer = setInterval(() => {
  //   getSceneTree();
  // }, 10000);
});
onBeforeUnmount(() => {
  clearInterval(timmer);
  clearInterval(sceneTimmer);
})
</script>
<style lang="less" scoped>
@keyframes scale {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.15);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes color {
  0% {
    background: linear-gradient(90deg, #811834 0%, #d38d8d 0%, #ef0833 88%);
  }

  100% {
    background: linear-gradient(90deg, rgb(12 238 251 / 100%) 0%, rgb(129 211 248 / 100%) 0%, rgb(2 167 240 / 100%) 88%);
  }
}

.page-box {
  display: flex;
  height: calc(100vh - 115px);
  overflow: auto;

  .__left {
    flex-shrink: 0;
    width: 250px;
    height: 100%;
    padding: 10px;
    border: 2px solid #756edb;
    background: #fff;

    .__header {
      height: 40px;
      background-color: #0960bd;
      color: #fff;
      font-size: 14px;
      font-weight: 600;
      line-height: 40px;
      text-align: center;
    }

    .__box {
      display: flex;
      height: calc(100% - 50px);
      margin-top: 10px;
      overflow-y: auto;
    }

    .box-left {
      border-right: 1px solid #ddd;
    }

    .box-right,
    .box-left {
      flex: 1;
      flex-shrink: 0;
    }

    .box-header {
      border-bottom: 1px solid #ddd;
      color: #000;
      font-size: 12px;
      font-weight: 600;
      line-height: 30px;
      text-align: center;
    }

    .data-item {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 40px;
      margin: 20px 20px 0;
      padding: 0 5px;
      overflow: auto;
      overflow: hidden;
      border-radius: 5px;
      background: linear-gradient(90deg, rgb(12 238 251 / 100%) 0%, rgb(129 211 248 / 100%) 0%, rgb(2 167 240 / 100%) 88%);
      color: #333;
      font-size: 12px;
      text-align: center;
      cursor: pointer;

      &.is-select {
        color: #fff;
      }

      &.is-error {
        animation: color 1s infinite linear;
        background: linear-gradient(90deg, #811834 0%, #d38d8d 0%, #ef0833 88%);
      }
    }
  }

  .__content {
    display: flex;
    flex: 1;
    flex-direction: column;
    height: 100%;
    margin-left: 20px;
    padding: 10px;
    overflow: hidden;
    border: 2px solid #756edb;
    background: #fff;

    .__header {
      height: 40px;
      background-color: #0960bd;
      color: #fff;
      font-size: 14px;
      font-weight: 600;
      line-height: 40px;
      text-align: center;
    }

    .__content-img {
      position: relative;
      flex: 1;
      margin-top: 10px;

      img {
        width: 100%;
        height: 100%;
      }

      .img-point {
        position: absolute;
        z-index: 9;
        width: 16px;
        height: 16px;
        margin-top: -8px;
        margin-left: -8px;
        animation: scale 1s infinite ease-in-out;
        border-radius: 100%;
        background: #7bdb6e;
        box-shadow: 0 0 8px #fff;

        .point-mask {
          width: 100%;
          height: 100%;
          background: transparent;
          cursor: pointer;
        }

        &.is-alarm {
          background: #e41c1c;
          box-shadow: 0 0 8px #fff
        }
      }
    }
  }
}
</style>
